<template>
  <van-tabbar v-model="active" route placeholder>
    <van-tabbar-item name="home" replace to="/home">
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? icon.home_on : icon.home_off" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="group" replace to="/group">
      <span>圈子</span>
      <template #icon="props">
        <img :src="props.active ? icon.group_on : icon.group_off" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="market" replace to="/market">
      <span>创意集市</span>
      <template #icon="props">
        <img :src="props.active ? icon.market_on : icon.market_off" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="knowledge" replace to="/knowledge">
      <span>知识</span>
      <template #icon="props">
        <img :src="props.active ? icon.know_on : icon.know_off" />
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="mine" replace to="/mine">
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? icon.mine_on : icon.mine_off" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: 'FootGuide',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 'home',
      icon: {
        home_on: require('@/assets/nav/home_on.svg'),
        home_off: require('@/assets/nav/home_off.svg'),
        group_on: require('@/assets/nav/group_on.svg'),
        group_off: require('@/assets/nav/group_off.svg'),
        know_on: require('@/assets/nav/know_on.svg'),
        know_off: require('@/assets/nav/know_off.svg'),
        market_on: require('@/assets/nav/market_on.svg'),
        market_off: require('@/assets/nav/market_off.svg'),
        mine_on: require('@/assets/nav/mine_on.svg'),
        mine_off: require('@/assets/nav/mine_off.svg')
      }
    }
  },
  watch: {
    $route(to) {
      this.active = to.name
    }
  },
  mounted() {
    this.active = this.$route.name
    this.$el.parentNode.style.paddingBottom = '1rem'
  },
  methods: {}
}
</script>

<style lang="less">
.van-tabbar {
  height: 100px;
  img {
    width: 50px;
    height: 50px;
  }
}
</style>
